<template>
	<diaLogComp
		:show="show"
		title="修改密码"
		width="550px"
		@closed="emit('closed')">
		<el-form
			:model="password"
			:rules="rules"
			ref="form_comp"
			label-width="auto">
			<el-form-item
				label="旧密码"
				prop="oldPassword">
				<el-input v-model="password.oldPassword" />
			</el-form-item>
			<el-form-item
				label="新密码"
				prop="newPassword">
				<el-input
					type="password"
					show-password
					v-model="password.newPassword" />
			</el-form-item>
		</el-form>
		<div class="bottom_btn">
			<el-button @click="close">取消</el-button>
			<el-button
				@click="edit"
				type="primary">
				修改
			</el-button>
		</div>
	</diaLogComp>
</template>

<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from "vue";
import api from "@/api";
import diaLogComp from "@/components/dialog/index.vue";
import { ElMessage } from "element-plus";
import { userUserStore } from "@/pinia/user";

const emit = defineEmits(["closed"]);
const show = ref(false);
onMounted(() => {
	show.value = true;
});

const USER = userUserStore();

const password = ref<{
	newPassword: string;
	oldPassword: string;
}>({} as any);
const rules = {
	newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
	oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
};

// 取消
const close = () => {
	password.value = {} as any;
	show.value = false;
};
// 修改
const form_comp = useTemplateRef("form_comp");
const edit = async () => {
	await form_comp.value!.validate();

	const msg = await api.user.editPassword({
		...password.value,
		userId: USER.user_info.userId,
	});
	if (msg.code == 1000) {
		ElMessage.success("修改成功");
	}
};
</script>

<style lang="less" scoped></style>
